<template>
	<view class="">
		<view class="body">
			<view class="order-title">
				{{ msg }}
			</view>
			<view class="baby_box">
				<img class="baby_left" :src="imgUrl + orderObj.baseImg" alt="" />
				<view class="baby_center">
					<view class="top">
						{{ orderObj.monName }}
					</view>
					<view class="btm"></view>
				</view>
				<view class="baby_right">
					<u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
				</view>
			</view>
			<view class="details_box" :style="orderObj.status == 1 ? 'height: 216rpx;' : ''">
				<text class="tit">订单详情</text>
				<view class="details_label">
					订单金额 :
					<text class="details_value">
						{{ orderObj.price }}
					</text>
				</view>
				<view class="details_label">
					订单号 :
					<text class="details_value">{{ orderObj.orderNo }}</text>
						<image @click="clickCopy" class="copy" :src="imgUrl+'/static/images/iconimgpopoak47.png'"
							alt="" srcset=""></image>
				</view>
			</view>
			<view class="explanation">
				<view class="tit">说明</view>
				<view class="top">一、在账号有待支付订单时，不允许购买其他藏品。</view>
				<view class="btm">二、同一账号一段时间内累计取消3次订单，将会被限购一段时间。</view>
			</view>
			<view class="foot">
				<view class="cancel" @click="goCollect">藏馆</view>
				<view class="buy" @click="goMarket">继续购买</view>
			</view>
		</view>
	</view>
</template>

<script>
import config from '@/config.js';
import { getOrderDetailSucceess } from '@/api/work/market.js';
import constant from '../../utils/constant';
export default {
	data() {
		return {
			orderId: 0,
			orderObj: {},
			imgUrl: config.gillUrl,
			imgUrl: config.imgUrl,
			msg:''
		};
	},
	onLoad(opotions) {
		this.id = opotions.id;
		this.orderId = opotions.orderId;
		this.getOrderDetail();
	},
	created() {},
	methods: {
		// 获取订单详情
		async getOrderDetail() {
			let param = {};
			param.orderId = this.orderId;
			// console.log(param.orderId, 'this.orderId ');
			param.orderSource = 1;
			const res = await getOrderDetailSucceess(param);
			// console.log(res, 'ppp');
			this.orderObj = res.data.detail;
			this.msg = res.data.msg;
		},
		clickCopy(){
			uni.setClipboardData({
				data: this.orderObj.orderNo, // Order number to copy
				success: () => {
					uni.showToast({
						title: '订单号已复制',
						icon: 'success'
					});
				},
				fail: () => {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		},
		goMarket() {
			// console.log(123);
			uni.switchTab({
				url: '/pages/work/market'
			});
		},
		goCollect(){
			uni.navigateTo({
				url: '/pages/work/message'
			});
		}
	}
};
</script>

<style lang="scss">
.order-title{
	width: 680rpx;
	height: 100rpx;
	color: #46A6F8;
	font-weight: 8000;
	font-size: 30rpx;
	line-height: 65rpx;
	text-align: center;
}
.body {
	margin: 0 34rpx;

	.time_top {
		color: #ffffff;
		margin: 34rpx 0;
		display: flex;
		justify-content: center;
	}
}

.baby_box {
	margin-bottom: 38rpx;
	display: flex;
	align-items: center;
	width: 680rpx;
	height: 181rpx;
	background: #130F26;
	box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
	border-radius: 14rpx 14rpx 14rpx 14rpx;
	opacity: 1;

	.baby_left {
		margin: 34rpx;
		width: 112rpx;
		height: 112rpx;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
	}

	.baby_center {
		width: 440rpx;
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: space-evenly;

		.top {
			font-size: 28rpx;
			font-family:"font"; 
			font-weight: 400;
			color: #ffffff;
		}

		.btm {
			font-size: 28rpx;
			font-family:"font"; 
			font-weight: 400;
			color: #8a92a3;
		}
	}

	// .baby_right{
	// 	::v-deep.u-count-down__text{
	// 		color: #FFFFFF !important;
	// 	}
	// }
}

::v-deep.u-count-down__text {
	color: #ffffff !important;
}

.details_box {
	padding: 17rpx 31rpx 34rpx 34rpx;
	width: 680rpx;
	height: 220rpx;
	background: #130F26 ;
	box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
	border-radius: 14rpx 14rpx 14rpx 14rpx;
	opacity: 1;

	.tit {
		display: block;
		font-size: 28rpx;
		font-family: 迷你简琥珀-Regular, 迷你简琥珀;
		font-weight: 400;
		color: #ffffff;
		margin-bottom: 34rpx;
	}

	.details_label {
		display: flex;
		font-size: 28rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #8a92a3;
		margin-bottom: 17rpx;

		.copy {
			//position: relative;
			width: 26rpx;
			height: 26rpx;
			// right: 0;
			// top:0
		}
	}

	.details_value {
		display: block;
		margin-left: 10rpx;
		width: 475rpx;
		font-size: 28rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #ffffff;
		margin-top: 5rpx;
		.decimal-part {
			font-size: 12px; // Customize the font size for the decimal part
			// Align the decimal part to the top for a smaller appearance
		}
	}
}

.explanation {
	margin: 87rpx 0 0 34rpx;

	.tit {
		font-size: 24rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #8a92a3;
	}

	.top {
		font-size: 21rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #8a92a3;
	}

	.btm {
		font-size: 21rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #8a92a3;
	}
}

.foot {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 750rpx;
	height: 112rpx;
	background: #13151a;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	.cancel {
		width: 209rpx;
		height: 77rpx;
		line-height: 77rpx;
		background: #1c1f25;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #ffffff;
	}

	.buy {
		width: 436rpx;
		height: 77rpx;
		line-height: 77rpx;
		background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #ffffff;
	}
}

.time {
	display: flex;
	font-size: 28rpx;
	font-family:"font"; 
	font-weight: 400;
	color: #ffffff;

	.time__doc {
		margin-right: 10rpx;
		margin-left: 5rpx;
	}
}

.times_buy {
	//margin-left:-25rpx ;
	position: absolute;
	top: 400rpx;
	width: 100%;
	height: 530rpx;
	background: #0d0e11;
	border-radius: 29rpx 29rpx 29rpx 29rpx;
	border: 2rpx solid #8a92a3;
	display: flex;
	flex-direction: column;
	align-items: center;

	.times_num {
		position: absolute;
		top: 200rpx;
		// left: 260rpx;
		width: 345rpx;
		height: 87rpx;
		font-size: 31rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #8a92a3;
		.times_num_2 {
			position: absolute;
			left: 30rpx;
		}
		.times_all {
			width: 120rpx;
			position: absolute;
			top: 10rpx;
			left: 230rpx;
			font-size: 30rpx;
			font-family:"font"; 
			font-weight: 400;
			color: #ffffff;
		}
	}

	.tmies_tit {
		margin: 50rpx 0 255rpx 0;
		//width: 162rpx;
		height: 65rpx;
		font-size: 54rpx;
		font-family: 迷你简琥珀-Regular, 迷你简琥珀;
		font-weight: 400;
		color: #ffffff;
		line-height: 65rpx;
	}

	.times_total {
		//width: 300rpx;
		margin-bottom: 34rpx;
		height: 42rpx;
		font-size: 31rpx;
		font-family:"font"; 
		font-weight: 400;
		color: #8a92a3;
		line-height: 42rpx;
	}

	.times_btm {
		position: relative;
		top: -50rpx;
		left: 0;
		width: 100%;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.times_btm_left {
			font-size: 35rpx;
			font-family:"font"; 
			font-weight: 400;
			color: #ffffff;
			line-height: 78rpx;
			width: 244rpx;
			height: 78rpx;
			background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
		}

		.times_btm_right {
			//float: right;
			width: 244rpx;
			height: 78rpx;
			background: #1c1f25;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			font-size: 35rpx;
			font-family:"font"; 
			font-weight: 400;
			color: #ffffff;
			line-height: 78rpx;
		}
	}
}

.top_iocn {
	width: 28rpx;
	height: 28rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
	position: relative;
	top: 6rpx;
	right: 12rpx;
}

.details_box2 {
	padding: 17rpx 31rpx 34rpx 34rpx;
	width: 680rpx;
	background: #15142d;
	box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
	border-radius: 14rpx 14rpx 14rpx 14rpx;
	opacity: 1;
	height: 216rpx;
}
</style>
